<template>
	<view class="progress">
    <div class="contract-completion-time">合同竣工日期：2024-10-31</div>
		<swiper class="card-swiper" :current="currentIndex" :interval="3000" :duration="1000" previous-margin='260rpx'
			@change="change">
			<swiper-item v-for="item, index in data" :key="item" class="swiper-item-box">
				<view @click="active(index)"
					:class="{ 'swiper-item': true, 'active-item': currentIndex == index, 'not-active': item.status == 1, 'blue': item.status == 2 }">
					<view>
						<view class="name">{{ item.taskName }}</view>
						<wd-tag :color="tagStatus[item.status]?.color" :bg-color="tagStatus[item.status]?.bg">
							{{ tagStatus[item.status]?.text }}
						</wd-tag>
            <view class="swiper-time">预计：01-02</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="progress-bar">
			<view class="slider">
				<wd-slider v-model="current" :step="step" hide-min-max hide-label activeColor="#3074F9;"
					inactiveColor='#F2F3F5' @dragmove="dragmove"></wd-slider>
			</view>
			<view class="dots">
				<view :class="{ 'dot-item': true, active: index == currentIndex, 'not-active': currentIndex < index }"
					v-for="item, index in 100 / (100 / (data.length))"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
const props = defineProps({
	data: {
		type: [Array, Object],
		default: () => []
	}
})
const tagStatus = {
	1: {
		text: '未开始',
		color: '#3D3D3D',
		bg: '#F3F3F3'
	},
	2: {
		text: '进行中',
		color: '#007DFF',
		bg: '#D9EDFF'
	},
	3: {
		text: '已完成',
		color: '#14C85C',
		bg: '#E3F9E9'
	},
	100:{
		text: '待验收',
		color: '#FF9900',
		bg: '#FFF0D9'
	},
	101:{
		text: '已验收',
		color: '#14C85C',
		bg: '#E3F9E9'
	}
}
const current = ref(0)
const currentIndex = ref(0)
const step = computed(() => {
	return 100 / (props.data.length - 1)
})
/**
 * 激活
 */
const active = (index) => {
	current.value = 100 / (props.data.length - 1) * index;
	currentIndex.value = index;
};
/**
 * 切换轮播
 */
const change = (event) => {
	active(event.detail.current);
}
/**
 * 移动进度线
 */
const dragmove = ({ value }) => {
	currentIndex.value = value / step.value;
}
onMounted(() => {
	const ongoing = props.data.findIndex(v => v.status == 2);
	currentIndex.value = ongoing == -1 ? 0 : ongoing;
})
</script>

<style lang="scss" scoped>
.progress {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	background: white;
	border-radius: 20rpx;
	padding-top: 20rpx;
  .contract-completion-time{
    margin-bottom: 20rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #86909C;
  }
	:deep(.wd-tag){
		border:1px solid white !important;
	}
	.card-swiper {
		display: flex;
		align-items: center;
		//height: 160rpx;
    height: 180rpx;

		.swiper-item-box {
			display: flex;
			align-items: center;
			width: 50% !important;
			display: flex;
			justify-content: left;
		}

		.swiper-item {
			width:190;
			//height: 128rpx;
      height: 140rpx;
			background: #F2F3F5;
			border-radius: 20rpx;
			display: grid;
			place-items: center;
			text-align: center;

			.name {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 20rpx;
				box-sizing: border-box;
				width:190rpx;
				font-size: 12px;
				margin-top: 10rpx;
			}
      .swiper-time{
				font-size: 20rpx;
			  color: #86909C;
        margin: 10rpx 0px;
			}
		}

		.active-item {
			width:200rpx;
      height: 170rpx;
			//height: 156rpx;
			border-radius: 20rpx;
			
			.name {
				width:200rpx;
			}
      .swiper-item{
        color: #FFFFFF;
      }
		}

		.blue {
			background: $uni-color-primary;
			box-shadow: 0rpx 8rpx 20rpx 0rpx #B1D7FF;
			color: white;
		}

		.not-active {
			border: 2rpx solid #E1E6ED;
			background: white;
		}
	}


	.progress-bar {
		width: 90vw;
		position: relative;
		padding: 0 32rpx;
		box-sizing: border-box;
		height: 72rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.slider{
			width: 100%;
		}
		.dots {
			height: 16px;
			width: calc(100% - 64rpx);
			position: absolute;
			top: calc(36rpx - 8rpx);
			display: flex;
			justify-content: space-between;

			.dot-item {
				width: 16rpx;
				height: 16rpx;
				background: #3074F9;
				border-radius: 50%;
				left: calc((100vw - 64rpx) * var(--position));
			}

			.active {
				opacity: 0;
			}

			.not-active {
				background: #F2F3F5;
			}
		}

	}
}
</style>